<template>
	<view class="content b-t">
		<view class="list-order-box">
			<!-- 空白页 -->
			<empty v-if="myMonthList.length == 0"></empty>
			<!-- 订单列表 -->
			<view v-for="(item,index) in myMonthList" :key="index" class="order-item">
				<view class="i-top b-b" @click="toOrderDetail(item)">
					<text class="time">{{ item.createTime }}</text>
					<text class="state" v-if="!item.afterSale"
						:style="{color:item.orderStatusColor}">{{item.orderStatusDesc}}</text>
					<text class="state" v-if="item.afterSale">已申请退款</text>
					<text v-if="item.orderStatus == '4'" class="del-btn yticon icon-iconfontshanchu1"
						@click="deleteOrder(item)"></text>
				</view>
			
				<scroll-view v-if="item.itemList.length > 1" class="goods-box" scroll-x
					@click="toOrderDetail(item)">
					<view v-for="goods in item.itemList" :key="goods.id" class="goods-item">
						<image class="goods-img" :src="goods.skuPic" mode="aspectFill"></image>
					</view>
				</scroll-view>
				<view v-else class="goods-box-single" v-for="goods in item.itemList" :key="goods.id"
					@click="toOrderDetail(item)">
					<image class="goods-img" :src="goods.skuPic" mode="aspectFill"></image>
					<view class="right">
						<text class="title clamp">{{ goods.skuName }}</text>
						<!-- <text class="attr-box">{{goods.productSkuDesc||''}} x {{goods.productUnit}}</text> -->
						<text class="price">{{ goods.skuPrice.toFixed(2) }} × {{ goods.skuQuantity }}</text>
					</view>
				</view>
			
				<view class="price-box" @click="toOrderDetail(item)">
					共
					<text class="num">{{ countSkuNum(item) }}</text>
					件商品 实付款
					<text class="price">{{ item.payAmount.toFixed(2) }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import empty from "@/components/empty";
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		components: {
			uniLoadMore,
			empty
		},
		data() {
			return {
				myMonthList: [],
			}
		},
		onLoad(option) {
			this.searchUserPerformance();
		},

		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		methods: {
			// 购买数
			countSkuNum(order) {
				let count = 0;
				order.itemList.forEach(item => count += item.skuQuantity);
				return count;
			},
			//查询用户奖金明细
			searchUserPerformance() {
				// 获取用户当月订单信息列表
				this.$api.request.getMyMonthOrder({}, res => {
					if(res.code == 200){
						this.myMonthList = res.data
					}
				})
			},
			// 跳转订单详情
			toOrderDetail(item) {
				const that = this
				this.$api.request.getOrderInfoType({
					memberId: item.memberId,
					orderId: item.id,
				}, res => {
					console.log(res);
					if (res.code == 200) {
						// 如果该订单是商品
						if (res.data == 1) {
							uni.navigateTo({
								url: '/pagesA/sys/user/orderDetail?id=' + item.id 
							});
						}
						// 如果该订单是服务
						else if (res.data == 2) {
							that.getServiceData(item)
						}
					}
				})
			
			},
			// 获取服务订单
			getServiceData(item) {
				this.$api.request.orderByInfoData({
					wxId: uni.getStorageSync('openId'),
					orderId: item.id
				}, res => {
					if (res.code == 200) {
						console.log(res);
						uni.navigateTo({
							url: '/pagesA/appointment/service/index?status=' + item.status ,
							success(resp) {
								resp.eventChannel.emit('item', res.data[0])
							}
						})
					}
				})
			},
		}
	}
</script>

<style lang='scss'>

	.content {
		position: relative;
	}

	.list-order-box {
		width: 100vw;
		height: 99vh;
		overflow-y: scroll;
	}
	
	.order-item {
		display: flex;
		flex-direction: column;
		padding-left: 30upx;
		background: #fff;
		margin-top: 16upx;
	
		.i-top {
			display: flex;
			align-items: center;
			height: 80upx;
			padding-right: 30upx;
			font-size: $font-base;
			color: $font-color-dark;
			position: relative;
	
			.time {
				flex: 1;
			}
	
			.state {
				color: $base-color;
			}
	
			.del-btn {
				padding: 10upx 0 10upx 36upx;
				font-size: $font-lg;
				color: $font-color-light;
				position: relative;
	
				&:after {
					content: '';
					width: 0;
					height: 30upx;
					border-left: 1px solid $border-color-dark;
					position: absolute;
					left: 20upx;
					top: 50%;
					transform: translateY(-50%);
				}
			}
		}
	
		/* 多条商品 */
		.goods-box {
			height: 160upx;
			padding: 20upx 0;
			white-space: nowrap;
	
			.goods-item {
				width: 120upx;
				height: 120upx;
				display: inline-block;
				margin-right: 24upx;
			}
	
			.goods-img {
				display: block;
				width: 100%;
				height: 100%;
			}
		}
	
		/* 单条商品 */
		.goods-box-single {
			display: flex;
			padding: 20upx 0;
	
			.goods-img {
				display: block;
				width: 120upx;
				height: 120upx;
			}
	
			.right {
				flex: 1;
				display: flex;
				flex-direction: column;
				padding: 0 30upx 0 24upx;
				overflow: hidden;
	
				.title {
					font-size: $font-base + 2upx;
					color: $font-color-dark;
				}
	
				.attr-box {
					font-size: $font-sm + 2upx;
					color: $font-color-light;
					padding: 10upx 12upx;
				}
	
				.price {
					font-size: $font-base + 2upx;
					color: #E71E22;
	
					&:before {
						content: '￥';
						font-size: $font-sm;
						margin: 0 2upx 0 8upx;
					}
				}
			}
		}
	
		.price-box {
			display: flex;
			justify-content: flex-end;
			align-items: baseline;
			padding: 20upx 30upx;
			font-size: $font-sm + 2upx;
			color: $font-color-light;
	
			.num {
				margin: 0 8upx;
				color: $font-color-dark;
			}
	
			.price {
				font-size: $font-lg;
				color: $font-color-dark;
	
				&:before {
					content: '￥';
					font-size: $font-sm;
					margin: 0 2upx 0 8upx;
				}
			}
		}
	
		.action-box {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			height: 100upx;
			position: relative;
			padding-right: 30upx;
		}
	
		.action-btn {
			width: 160upx;
			height: 60upx;
			margin: 0;
			margin-left: 24upx;
			padding: 0;
			text-align: center;
			line-height: 60upx;
			font-size: $font-sm + 2upx;
			color: $font-color-dark;
			background: #fff;
			border-radius: 100px;
	
			&:after {
				border-radius: 100px;
			}
	
			&.recom {
				background: #fff9f9;
				color: $base-color;
	
				&:after {
					border-color: #f7bcc8;
				}
			}
		}
	}
</style>
